<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="../public/css/base.css">
    <link rel="stylesheet" href="../public/css/header.css">
    <link rel="stylesheet" href="../public/css/songDetail.css">
    <link rel="stylesheet" href="../public/css/footer.css">
    <link rel="stylesheet" href="../public/css/playJD.css">
</head>

<body>

    <!-- 顶部导航条 -->
    <header class="header">
        <div class="m-top">
            <div class="wrap f-nb">
                <div class="l-top">
                    <h1><a href="#" class="logo">网易云音乐</a></h1>
                    <div class="n-top">
                        <ul class="m-nav">
                            <li>
                                <span>

                                    <a href="#" class="fst">发现音乐</a>
                                    <sup class="sanjiao show"></sup>
                            </li>
                            <li>
                                <a href="#">我的音乐</a>
                                <sup class="sanjiao hide"></sup>
                            </li>
                            <li><a href="#">朋友</a></li>
                            <li><a href="#">商城</a></li>
                            <li>
                                <a href="#">音乐人</a>
                            </li>
                            <li class="download_c">
                                <a href="#">下载客户端</a>
                                <sup class="sanjiao hide"></sup>
                                <sup class="hot">&nbsp;</sup>
                            </li>
                        </ul>

                    </div>

                </div>
                <div class="r-top">
                    <div class="log"><a href="#" class="login">登录</a></div>
                    <a href="#" class="creater">创作者中心</a>
                    <div class="search">
                        <span class="parent">
                            <input type="text" class="s_btn" placeholder="音乐/视频/电台/用户">
                        </span>
                    </div>
                </div>
            </div>

        </div>
        <div class="subnav">
            <div class="wrap f-pr">
                <ul class="nav">
                    <li>
                        <a href="./index.html" class="">
                            &nbsp;&nbsp;推荐&nbsp;&nbsp;
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            &nbsp;&nbsp;排行榜&nbsp;&nbsp;
                        </a>
                    </li>
                    <li>
                        <a href="./playlist.html" class="songList">
                            &nbsp;&nbsp;歌单&nbsp;&nbsp;
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            &nbsp;&nbsp;主播电台&nbsp;&nbsp;&nbsp;
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            &nbsp;&nbsp;歌手&nbsp;&nbsp;
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            &nbsp;&nbsp;新碟上架&nbsp;&nbsp;
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </header>

    <!-- 内容 -->
    <div class="content_wrap">
        <div class="content_left">
            <div class="music_top clearfix">
                <div class="dj_img">
                    <div class="mkb">
                        <img src="http://p2.music.126.net/Bl_xdJtNTcp4RDdI5huaZA==/6632254138820634.jpg?param=130y130"
                            alt="">
                        <span class="msk f-alpha"></span>
                    </div>
                </div>
                <div class="dj_info clearfix">
                    <div class="dj_info_title">
                        <i class="dj_info_title_logo"></i>
                        <div class="songNameH">
                            <span class="f-ff2">七友</span>
                            <a title="播放mv" href="/mv?id=376200"><i class="icn u-icn u-icn-2"></i></a>
                        </div>
                    </div>
                    <div class="sopng_ifn">
                        <p class="des s-fc4">歌手：<span title="梁汉文"><a class="s-fc7" href="/artist?id=3722">梁汉文</a></span>
                        </p>
                        <p class="des s-fc4">所属专辑：<a href="/album?id=11506" class="s-fc7">梁汉文集</a></p>
                    </div>
                    <div class="action_buttons clearfix">
                        <a href="#" class="play_btn">
                            <span class="btn2">
                                <em class="play_img btn2"></em>
                                播放</span>
                        </a>
                        <a href="#" class="addto_btn btn2"></a>
                        <a href="#" class="collection btn2">
                            <span class="btn2">收藏</span>
                        </a>
                        <a href="#" class="share btn2">
                            <span class="btn2">分享</span>
                        </a>
                        <a href="#" class="down_btn btn2">
                            <span class="btn2">下载</span>
                        </a>
                        <a href="#" class="pl_btn btn2">
                            <span class="btn2">(0)</span>
                        </a>
                    </div>
                    <div class="lyric_desc">
                        <!-- 作曲 : 雷颂德
                        <br>
                        编曲 : 雷颂德
                        <br>
                        监制 : 雷颂德
                        <br>
                        为了她 又再勉强去谈天论爱
                        <br>
                        又再振作去慰解他人
                        <br>
                        如难复合便尽早放开
                        <br>
                        凡事看开
                        <br>
                        又再讲 没有情人时还可自爱
                        <br>
                        忘掉或是为自己感慨
                        <br>
                        笑住说沉沦那些苦海
                        <br>
                        会有害
                        <br>
                        因为我坚强到利用自己的痛心
                        <br>
                        转换成爱心
                        <br> -->
                    </div>
                    <div class="showDiv">
                        <a href="javascript:;" class="showMore">
                            <span class="spanMAL">展开</span>
                            <i class="jiantou jiantou_h"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="n-songtb">
                <div class="comments_wrap">
                    <div class="comments">
                        <div class="c_title">
                            <h3>评论</h3>
                            <span class="songNum">共0条评论</span>
                        </div>
                        <div class="comments_contents">
                            <div class="user_comments">
                                <div class="headI">
                                    <img src="https://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50"
                                        alt="">
                                </div>
                                <div class="comment_area">
                                    <textarea name="" id="status" placeholder="评论"></textarea>
                                    <div class="corr u-arr"><em class="arrline">◆</em><span class="arrclr">◆</span>
                                    </div>
                                    <div class="user_comments_bottom">
                                        <a href="javascript:;" class="pull-right">评论</a>
                                        <span class="pull-right" id="counter">140</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 精彩评论 -->
                        <div class="good_comments_wrap clearfix">
                            <h3>精彩评论</h3>
                            <!-- <div id="155855841633265709748" class="itm" data-id="15585584">
                                <div class="head"><a href="/user/home?id=39830029"><img
                                            src="https://p1.music.126.net/E12w3dmCz4S0-wA1Jsee-w==/109951164552840704.jpg?param=50y50"></a>
                                </div>
                                <div class="cntwrap">
                                    <div class="">
                                        <div class="cnt f-brk"><a href="/user/home?id=39830029"
                                                class="s-fc7">天马行空-MAZHENYU</a>：整天哥哥哥哥的，叫多了烦。粤语歌连许冠杰，校长都没。<img
                                                src="http://s1.music.126.net/style/web2/emt/emoji_97.png"></div>
                                    </div>
                                    <div class="rp">
                                        <div class="time s-fc4">2015年4月18日</div>
                                        <span class="dlt">
                                            <span style="display: none;" class="j-delete-comment">
                                                <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                                    data-type="delete">删除</a>
                                                <span class="sep">|</span>
                                            </span></span>
                                        <a data-id="15585584" class="likeNum" data-type="like"
                                            href="javascript:void(0)">
                                            <i class="zan u-icn2 u-icn2-12"></i> (495)</a>
                                        <span class="sep">|</span>
                                        <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                            data-type="reply">回复</a>
                                    </div>
                                </div>
                            </div>
                            <div id="155855841633265709748" class="itm" data-id="15585584">
                                <div class="head"><a href="/user/home?id=39830029"><img
                                            src="https://p1.music.126.net/E12w3dmCz4S0-wA1Jsee-w==/109951164552840704.jpg?param=50y50"></a>
                                </div>
                                <div class="cntwrap">
                                    <div class="">
                                        <div class="cnt f-brk"><a href="/user/home?id=39830029"
                                                class="s-fc7">天马行空-MAZHENYU</a><img class="vip_img"
                                                src="//p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4213923139/f08a/c6ea/10ee/f7e2deef21937a1042e370c47525c956.png"
                                                class="brand-tag brand-vip">：看了评论也只有一个人说千千阙歌只认哥哥呀，哪里来的什么歌都只认哥哥？而且个人有个人的喜好，那个评论也只是说他自己只认哥哥，并没有喷别人的版本啊，相信很多人对于某一首歌都有自己偏爱的版本，这是多正常的一件事。<img
                                                src="http://s1.music.126.net/style/web2/emt/emoji_357.png"><img
                                                src="http://s1.music.126.net/style/web2/emt/emoji_357.png">理解万岁
                                        </div>
                                    </div>
                                    <div class="que f-brk f-pr s-fc3">
                                        <span class="darr">
                                            <i class="bd">◆</i>
                                            <i class="bg">◆</i>
                                        </span>
                                        <a class="s-fc7"
                                            href="/user/home?id=47514954">P橙紫</a>：本来对张国荣感觉还不错，舞台风格没话说，现在被脑残粉弄得听到哥哥都想吐，什么歌都来个只认哥哥，感情全香港的好歌就你家哥哥唱的好听。
                                    </div>
                                    <div class="rp">
                                        <div class="time s-fc4">2015年4月18日</div>
                                        <span class="dlt">
                                            <span style="display: none;" class="j-delete-comment">
                                                <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                                    data-type="delete">删除</a>
                                                <span class="sep">|</span>
                                            </span></span>
                                        <a data-id="15585584" class="likeNum" data-type="like"
                                            href="javascript:void(0)">
                                            <i class="zan u-icn2 u-icn2-12"></i> (495)</a>
                                        <span class="sep">|</span>
                                        <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                            data-type="reply">回复</a>
                                    </div>
                                </div>
                            </div> -->
                        </div>
                        <!-- 最新评论 -->
                        <div class="new_comments_wrap">
                            <h3>最新评论(0)</h3>
                            <!-- <div id="155855841633265709748" class="itm" data-id="15585584">
                                <div class="head"><a href="/user/home?id=39830029"><img
                                            src="https://p1.music.126.net/E12w3dmCz4S0-wA1Jsee-w==/109951164552840704.jpg?param=50y50"></a>
                                </div>
                                <div class="cntwrap">
                                    <div class="">
                                        <div class="cnt f-brk"><a href="/user/home?id=39830029"
                                                class="s-fc7">天马行空-MAZHENYU</a>：整天哥哥哥哥的，叫多了烦。粤语歌连许冠杰，校长都没。<img
                                                src="http://s1.music.126.net/style/web2/emt/emoji_97.png"></div>
                                    </div>
                                    <div class="rp">
                                        <div class="time s-fc4">2015年4月18日</div>
                                        <span class="dlt">
                                            <span style="display: none;" class="j-delete-comment">
                                                <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                                    data-type="delete">删除</a>
                                                <span class="sep">|</span>
                                            </span></span>
                                        <a data-id="15585584" class="likeNum" data-type="like"
                                            href="javascript:void(0)">
                                            <i class="zan u-icn2 u-icn2-12"></i> (495)</a>
                                        <span class="sep">|</span>
                                        <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                            data-type="reply">回复</a>
                                    </div>
                                </div>
                            </div>
                            <div id="155855841633265709748" class="itm" data-id="15585584">
                                <div class="head"><a href="/user/home?id=39830029"><img
                                            src="https://p1.music.126.net/E12w3dmCz4S0-wA1Jsee-w==/109951164552840704.jpg?param=50y50"></a>
                                </div>
                                <div class="cntwrap">
                                    <div class="">
                                        <div class="cnt f-brk"><a href="/user/home?id=39830029"
                                                class="s-fc7">天马行空-MAZHENYU</a><img class="vip_img"
                                                src="//p6.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4213923139/f08a/c6ea/10ee/f7e2deef21937a1042e370c47525c956.png"
                                                class="brand-tag brand-vip">：看了评论也只有一个人说千千阙歌只认哥哥呀，哪里来的什么歌都只认哥哥？而且个人有个人的喜好，那个评论也只是说他自己只认哥哥，并没有喷别人的版本啊，相信很多人对于某一首歌都有自己偏爱的版本，这是多正常的一件事。<img
                                                src="http://s1.music.126.net/style/web2/emt/emoji_357.png"><img
                                                src="http://s1.music.126.net/style/web2/emt/emoji_357.png">理解万岁
                                        </div>
                                    </div>
                                    <div class="que f-brk f-pr s-fc3">
                                        <span class="darr">
                                            <i class="bd">◆</i>
                                            <i class="bg">◆</i>
                                        </span>
                                        <a class="s-fc7"
                                            href="/user/home?id=47514954">P橙紫</a>：本来对张国荣感觉还不错，舞台风格没话说，现在被脑残粉弄得听到哥哥都想吐，什么歌都来个只认哥哥，感情全香港的好歌就你家哥哥唱的好听。
                                    </div>
                                    <div class="rp">
                                        <div class="time s-fc4">2015年4月18日</div>
                                        <span class="dlt">
                                            <span style="display: none;" class="j-delete-comment">
                                                <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                                    data-type="delete">删除</a>
                                                <span class="sep">|</span>
                                            </span></span>
                                        <a data-id="15585584" class="likeNum" data-type="like"
                                            href="javascript:void(0)">
                                            <i class="zan u-icn2 u-icn2-12"></i> (495)</a>
                                        <span class="sep">|</span>
                                        <a href="javascript:void(0)" class="s-fc3" data-id="15585584"
                                            data-type="reply">回复</a>
                                    </div>
                                </div>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="paging-wrap">
                <center>
                    <div class="box" id="wrap1"></div>
                </center>
            </div>
        </div>
        <div class="content_right">
            <div class="content_box">
                <div class="hitSong">
                    <h3>
                        包含这首歌的歌单
                    </h3>
                    <ul class="m-rctlist clearfix">
                        <li>
                            <div class="cver u-cover u-cover-3">
                                <a href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM" data-res-id="6827562995"
                                    data-res-type="13" data-res-action="log"
                                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"><img
                                        src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50">
                                </a>
                            </div>
                            <div class="info">
                                <p class="f-thide">
                                    <a class="sname f-fs1 s-fc0" href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM"
                                        data-res-id="6827562995" data-res-type="13" data-res-action="log"
                                        data-res-data="recommendclick|0||playlist-playlist-recommend|3455816">韩综 | 换乘恋爱
                                        BGM</a>
                                </p>
                                <p><span class="by s-fc4">by</span><a class="nm nm f-thide s-fc3"
                                        href="/user/home?id=111050645" title="咕噜咕噜v-">咕噜咕噜v-</a>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="cver u-cover u-cover-3">
                                <a href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM" data-res-id="6827562995"
                                    data-res-type="13" data-res-action="log"
                                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"><img
                                        src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50">
                                </a>
                            </div>
                            <div class="info">
                                <p class="f-thide">
                                    <a class="sname f-fs1 s-fc0" href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM"
                                        data-res-id="6827562995" data-res-type="13" data-res-action="log"
                                        data-res-data="recommendclick|0||playlist-playlist-recommend|3455816">韩综 | 换乘恋爱
                                        BGM</a>
                                </p>
                                <p><span class="by s-fc4">by</span><a class="nm nm f-thide s-fc3"
                                        href="/user/home?id=111050645" title="咕噜咕噜v-">咕噜咕噜v-</a>
                                </p>
                            </div>
                        </li>
                        <li>
                            <div class="cver u-cover u-cover-3">
                                <a href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM" data-res-id="6827562995"
                                    data-res-type="13" data-res-action="log"
                                    data-res-data="recommendclick|0||playlist-playlist-recommend|3455816"><img
                                        src="http://p2.music.126.net/YcUi9CkF91Cu-FrZ2EnHAQ==/109951166122947271.jpg?param=50y50">
                                </a>
                            </div>
                            <div class="info">
                                <p class="f-thide">
                                    <a class="sname f-fs1 s-fc0" href="/playlist?id=6827562995" title="韩综 | 换乘恋爱 BGM"
                                        data-res-id="6827562995" data-res-type="13" data-res-action="log"
                                        data-res-data="recommendclick|0||playlist-playlist-recommend|3455816">韩综 | 换乘恋爱
                                        BGM</a>
                                </p>
                                <p><span class="by s-fc4">by</span><a class="nm nm f-thide s-fc3"
                                        href="/user/home?id=111050645" title="咕噜咕噜v-">咕噜咕噜v-</a>
                                </p>
                            </div>
                        </li>

                    </ul>
                </div>
                <div class="likeSongPerson">
                    <h3>
                        相似歌曲
                    </h3>
                    <ul class="m-sglist">
                        <li class="clearfix">
                            <div class="txt">
                                <div class="f-thide">
                                    <a href="/song?id=308353" title="钟无艳" class="s-fc1" data-res-id="308353"
                                        data-res-type="18" data-res-action="log"
                                        data-res-data="recommendclick|0||song-song-recommend|118261">钟无艳</a>
                                </div>
                                <div class="f-thide s-fc4"><span title="谢安琪"><a class="s-fc4"
                                            href="/artist?id=9952">谢安琪</a></span></div>
                            </div>
                            <div class="opr clearfix">
                                <a data-res-action="play" data-res-id="308353" data-res-type="18" class="play"
                                    href="javascript:;"></a>
                                <a data-res-action="addto" data-res-id="308353" data-res-type="18" class="add"
                                    href="javascript:;"></a>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="txt">
                                <div class="f-thide">
                                    <a href="/song?id=308353" title="钟无艳" class="s-fc1" data-res-id="308353"
                                        data-res-type="18" data-res-action="log"
                                        data-res-data="recommendclick|0||song-song-recommend|118261">钟无艳</a>
                                </div>
                                <div class="f-thide s-fc4"><span title="谢安琪"><a class="s-fc4"
                                            href="/artist?id=9952">谢安琪</a></span></div>
                            </div>
                            <div class="opr clearfix">
                                <a data-res-action="play" data-res-id="308353" data-res-type="18" class="play"
                                    href="javascript:;"></a>
                                <a data-res-action="addto" data-res-id="308353" data-res-type="18" class="add"
                                    href="javascript:;"></a>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="txt">
                                <div class="f-thide">
                                    <a href="/song?id=308353" title="钟无艳" class="s-fc1" data-res-id="308353"
                                        data-res-type="18" data-res-action="log"
                                        data-res-data="recommendclick|0||song-song-recommend|118261">钟无艳</a>
                                </div>
                                <div class="f-thide s-fc4"><span title="谢安琪"><a class="s-fc4"
                                            href="/artist?id=9952">谢安琪</a></span></div>
                            </div>
                            <div class="opr clearfix">
                                <a data-res-action="play" data-res-id="308353" data-res-type="18" class="play"
                                    href="javascript:;"></a>
                                <a data-res-action="addto" data-res-id="308353" data-res-type="18" class="add"
                                    href="javascript:;"></a>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="txt">
                                <div class="f-thide">
                                    <a href="/song?id=308353" title="钟无艳" class="s-fc1" data-res-id="308353"
                                        data-res-type="18" data-res-action="log"
                                        data-res-data="recommendclick|0||song-song-recommend|118261">钟无艳</a>
                                </div>
                                <div class="f-thide s-fc4"><span title="谢安琪"><a class="s-fc4"
                                            href="/artist?id=9952">谢安琪</a></span></div>
                            </div>
                            <div class="opr clearfix">
                                <a data-res-action="play" data-res-id="308353" data-res-type="18" class="play"
                                    href="javascript:;"></a>
                                <a data-res-action="addto" data-res-id="308353" data-res-type="18" class="add"
                                    href="javascript:;"></a>
                            </div>
                        </li>
                        <li class="clearfix">
                            <div class="txt">
                                <div class="f-thide">
                                    <a href="/song?id=308353" title="钟无艳" class="s-fc1" data-res-id="308353"
                                        data-res-type="18" data-res-action="log"
                                        data-res-data="recommendclick|0||song-song-recommend|118261">钟无艳</a>
                                </div>
                                <div class="f-thide s-fc4"><span title="谢安琪"><a class="s-fc4"
                                            href="/artist?id=9952">谢安琪</a></span></div>
                            </div>
                            <div class="opr clearfix">
                                <a data-res-action="play" data-res-id="308353" data-res-type="18" class="play"
                                    href="javascript:;"></a>
                                <a data-res-action="addto" data-res-id="308353" data-res-type="18" class="add"
                                    href="javascript:;"></a>
                            </div>
                        </li>


                    </ul>
                </div>
                <div class="m-multi">
                    <h3 class="u-hd3">
                        <span class="f-fl">网易云音乐多端下载</span>
                    </h3>
                    <ul class="bg clearfix">
                        <li><a data-res-action="bilog" data-log-action="downloadapp"
                                data-log-json="{&quot;type&quot;:&quot;iPhone&quot;,&quot;source&quot;:&quot;detail&quot;}"
                                href="https://itunes.apple.com/cn/app/id590338362" class="ios" hidefocus="true"
                                target="_blank">iPhone</a></li>
                        <li><a data-res-action="bilog" data-log-action="downloadapp"
                                data-log-json="{&quot;type&quot;:&quot;pc&quot;,&quot;source&quot;:&quot;detail&quot;}"
                                href="https://music.163.com/api/pc/download/latest" class="pc" hidefocus="true"
                                target="_blank">PC</a></li>
                        <li><a data-res-action="bilog" data-log-action="downloadapp"
                                data-log-json="{&quot;type&quot;:&quot;android&quot;,&quot;source&quot;:&quot;detail&quot;}"
                                href="https://music.163.com/api/android/download/latest2" class="aos" hidefocus="true"
                                target="_blank">Android</a></li>
                    </ul>
                    <p class="s-fc4">同步歌单，随时畅听320k好音乐</p>
                </div>
            </div>
        </div>
    </div>

    </div>

    <!-- 底部 -->
    <footer class="footer">
        <div class="f-ft">
            <div class="copy">
                <p class="link">
                    <a href="#">服务条款</a>
                    <span class="line">|</span>
                    <a href="#">隐私政策</a>
                    <span class="line">|</span>
                    <a href="#">儿童隐私政策</a>
                    <span class="line">|</span>
                    <a href="#">版权投诉指引</a>
                    <span class="line">|</span>
                    <a href="#">意见反馈</a>
                    <span class="line">|</span>
                    <a href="#">广告合作</a>
                </p>
                <p class="shangbiaoTemp">网易公司版权所有©1997-2021&nbsp;&nbsp;&nbsp;&nbsp;杭州乐读科技有限公司运营：<a href="#">浙网文[2021]
                        1186-054号</a></p>
                <p class="shangbiaoTemp">违法和不良信息举报电话：0571-89853516&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;举报邮箱：<a
                        href="#">ncm5990@163.com</a></p>
                <p class="shangbiaoTemp"><a href="#">粤B2-20090191-18 工业和信息化部备案管理系统网站</a> &nbsp;&nbsp;&nbsp;<a
                        href="#"><span class="police"></span> 浙公网安备 33010902002564号</a></p>
            </div>
            <ul class="enter">
                <li>
                    <a href="#" class="f_logo f_logo_1"></a>
                    <span class="f_span f_span_1"></span>
                </li>
                <li>
                    <a href="#" class="f_logo f_logo_2"></a>
                    <span class="f_span f_span_2"></span>
                </li>
                <li>
                    <a href="#" class="f_logo f_logo_3"></a>
                    <span class="f_span f_span_3"></span>
                </li>
                <li>
                    <a href="#" class="f_logo f_logo_4"></a>
                    <span class="f_span f_span_4"></span>
                </li>
                <li>
                    <a href="#" class="f_logo f_logo_5"></a>
                    <span class="f_span f_span_5"></span>
                </li>
            </ul>
        </div>
    </footer>

    <div class="g-btmbar">
        <div class="m-playbar m-playbar-unlock" style="visibility: visible; top: -7px;" id="auto-id-4ndXlkA9ebUV8Wsv">
            <div class="updn">
                <div class="left f-fl"><a href="javascript:;" class="btn" hidefocus="true" data-action="lock"></a></div>
                <div class="right f-fl"></div>
            </div>
            <div class="bg"></div>
            <div class="hand" title="展开播放条"></div>
            <div class="wrap" id="g_player" style="margin-left: -498.5px;">
                <div class="btns">
                    <a href="javascript:;" hidefocus="true" data-action="prev" class="prv" title="上一首(ctrl+←)">上一首</a>
                    <a href="javascript:;" hidefocus="true" data-action="play" class="ply j-flag"
                        title="播放/暂停(p)">播放/暂停</a>
                    <a href="javascript:;" hidefocus="true" data-action="next" class="nxt" title="下一首(ctrl+→)">下一首</a>
                </div>
                <div class="head j-flag"><img src="../public/images/default_album.jpg" class="headImg"><a
                        href="/song?id=1862332624" hidefocus="true" class="mask"></a></div>
                <div class="play">
                    <div class="j-flag words">
                        <a hidefocus="true" href="javascript:;" class="f-thide name fc1 f-fl"
                            title="Sundays (Just Piano Version)"></a>
                        <!-- <a hidefocus="true" href="/mv?id=14306903" class="mv f-fl" title="MV"></a> -->
                        <span class="by f-thide f-fl">
                            <span title="">
                                <a class="" href="/artist?id=797159" hidefocus="true"></a>
                            </span>
                        </span>
                        <!-- <a href="/playlist?id=6827562995&amp;_hash=songlist-1862332624" class="src" title="来自歌单"></a> -->
                    </div>
                    <div class="m-pbar" data-action="noop">
                        <div class="barbg j-flag" id="auto-id-mBsePfdSdx22QS6C">
                            <div class="rdy" style="width: 0px;"></div>
                            <div class="cur" style="width:0%;"><span class="btn f-tdn f-alpha"
                                    id="auto-id-66HN2GkBaiZvX4sp"><i></i></span></div>
                        </div>
                        <span class="j-flag time"><em>00:00</em> / 00:00</span>
                    </div>
                </div>
                <div class="oper f-fl"><a href="javascript:;" hidefocus="true" class="icn icn-pip"
                        title="画中画歌词">画中画歌词</a>
                    <a href="javascript:;" hidefocus="true" data-action="like" class="icn icn-add j-flag"
                        title="收藏">收藏</a>
                    <a href="javascript:;" hidefocus="true" data-action="share" class="icn icn-share" title="分享">分享</a>
                </div>
                <div class="ctrl f-fl f-pr j-flag">
                    <div class="m-vol" style="visibility:hidden;" id="auto-id-QQO4f8QuF5LHeMKV">
                        <div class="barbg"></div>
                        <div class="vbg j-t" id="auto-id-faTUNv9VvEl65yRM">
                            <div class="curr j-t" style="height: 93px;"></div>
                            <span class="btn f-alpha j-t" style="top: 0px;"></span>
                        </div>
                    </div>
                    <a href="javascript:;" hidefocus="true" data-action="volume" class="icn icn-vol"></a>
                    <a href="javascript:;" hidefocus="true" data-action="mode" class="icn icn-loop" title="循环"></a>
                    <span class="add f-pr">
                        <span class="tip" style="display:none;">已添加到播放列表</span>
                        <a href="javascript:;" title="播放列表" hidefocus="true" data-action="panel"
                            class="icn icn-list s-fc3">10</a>
                    </span>
                    <div class="tip tip-1" style="display:none;">循环</div>
                </div>
            </div>
        </div>
    </div>
    <audio src="" id="audio"></audio>
</body>
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script src="../public/js/songDetail.js"></script>
<script>
    let lyric_desc = $('.lyric_desc');
    let showMore = $('.showMore');
    let spanMAL = $('.spanMAL');
    let jiantou = $('.jiantou');
    let flag = true;
    showMore.on('click', function () {
        flag ? lyric_desc.css('height', 'auto') : lyric_desc.css('height', '');
        flag ? jiantou.removeClass('jiantou_h').addClass('jiantou_s') : jiantou.removeClass('jiantou_s')
            .addClass('jiantou_h')
        flag = !flag
        flag ? spanMAL.html('展开') : spanMAL.html('收起');

    })
</script>
<script src="../public/js/playJD.js"></script>
<script>
    var temp = location.search.substring(1);
    var arr = temp.split('&');
    // 再把arr里面的数据以 = 分割
    var params = {}
    arr.forEach(el => {
        var result = el.split('=') //result[0] --> key
        console.log(result);
        params[result[0]] = result[1];
    })
    var id = params.id;

    let play_btn = $('.play_btn');
    let ply = $('.ply');
    play_btn.on('click', function () {
        playMusic(id);
        let headImg = $('.headImg');
        let song_name = $('a.name');
        let span_by = $('span.by');
        let span_time = $('span.time');
        span_by.html('')

        $.ajax({
            url: 'http://localhost:3000/song/detail',
            data: {
                ids: id,
            },
            success: function (res) {
                console.log(res);
                let totalTime = res.songs[0].dt;
                let totalTimeS = totalTime / 1000
                let totalTime_m = Math.floor(totalTime / 1000 / 60);
                let totalTime_s = (totalTime / 1000) - (totalTime_m * 60).toFixed(0);
                totalTime_s = parseInt(totalTime_s.toFixed(0));
                totalTime_m = totalTime_m < 10 ? '0' + totalTime_m : totalTime_m;
                totalTime_s = totalTime_s < 10 ? '0' + totalTime_s : totalTime_s;
                let dt = `${totalTime_m}:${totalTime_s}`
                span_time.html(`<em>00:00</em> / ${dt}`)
                let span_time_em = $('span.time em');
                var setInterValTime = setInterval(() => {
                    let nowT = GetDateTime(getCurrentTime());
                    span_time_em.html(`${nowT}`)
                    let curTime = getCurrentTime();
                    let curProgress = (curTime / totalTimeS) * 100;
                    let cur = $('.cur');
                    cur.css('width', `${curProgress}%`)
                }, 1000)
                headImg.attr('src', res.songs[0].al.picUrl);
                song_name.html(`${res.songs[0].al.name}`);
                res.songs[0].ar.forEach((el, index) => {
                    span_by.append(`<span title="${el.name}"  class='NumS' data-nums="${index}" >
                                <a class="" href="/artist?id=${el.id}" hidefocus="true">${el.name}</a>
                            </span>`)
                })
                let nums = document.querySelectorAll(`.NumS`);
                console.log(nums);
                nums.forEach((el, index) => {
                    console.log(el.dataset.nums);
                    if (el.dataset.nums == 0) {
                        el.classList.remove('NumS');
                    }
                })
            }
        })
    })
    // 
    let icn_vol = $('.icn-vol');
    let m_vol = $('.m-vol');
    let vol_visOrHide = true
    icn_vol.on('click', function () {
        vol_visOrHide ? m_vol.css('visibility', 'visible') : m_vol.css('visibility', 'hidden');
        vol_visOrHide = !vol_visOrHide;
    })



    function playMusic(id) {
        let p = new Promise((resolve, reject) => {
            $.ajax({
                url: "http://localhost:3000/check/music",
                data: {
                    id: id,
                },
                success: function (res) {
                    if (res.success === true) {
                        resolve(id);
                    } else {
                        reject();
                    }
                }
            })
        })

        p.then((id) => {
            $.ajax({
                url: 'http://localhost:3000/song/url',
                data: {
                    id: id
                },
                success: function (res) {
                    let data = res.data;
                    let audio = $('audio');
                    data.forEach((el, index) => {
                        let url = el.url;
                        audio.attr('src', url)
                        audio = document.getElementById('audio');
                        playOrPaused();
                        ply.toggleClass('pas');
                    })
                }
            })
        }).then((id) => {
            ply.on('click', function () {
                ply.toggleClass('pas');
                playOrPaused();
            })


        }).catch(() => {
            console.log("false");
        });
    }

    function getCurrentTime(id) {
        // return GetDateTime(parseInt(audio.currentTime))
        return parseInt(audio.currentTime)

    }


    function GetDateTime(time) {
        let m = parseInt(time / 60)
        let s = time % 60;
        m = format(m);
        s = format(s);
        time = m + ":" + s;
        return time;
    }

    function format(val) {
        return val < 10 ? '0' + val : val
    };

    function playOrPaused(id, obj) {

        if (audio.paused) {

            audio.play();

            return;

        }

        audio.pause();


    }

    function hideOrShowControls(id, obj) {

        if (audio.controls) {

            audio.removeAttribute('controls');

            obj.innerHTML = '显示控制框'

            return;

        }

        audio.controls = 'controls';

        obj.innerHTML = 'true'

        return;

    }

    function vol(id, type, obj) {

        if (type == 'up') {

            var volume = audio.volume + 0.1;

            if (volume >= 1) {

                volume = 1;

            }

            audio.volume = volume;

        } else if (type == 'down') {

            var volume = audio.volume - 0.1;

            if (volume <= 0) {

                volume = 0;

            }

            audio.volume = volume;

        }

        document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume);

    }

    function muted(id, obj) {

        if (audio.muted) {

            audio.muted = false;

            obj.innerHTML = '开启静音';

        } else {

            audio.muted = true;

            obj.innerHTML = '关闭静音';

        }

    }

    //保留一位小数点

    function returnFloat1(value) {

        value = Math.round(parseFloat(value) * 10) / 10;

        if (value.toString().indexOf(".") < 0) {

            value = value.toString() + ".0";

        }

        return value;

    }
</script>

</html>